Custom Hooks

Custom Hooks란 무엇인가?

리액트에서 컴포넌트를 사용하다 보면 여러 컴포넌트에서 반복되는 로직을 발견할 수 있습니다. 이런 경우 Custom Hooks를 사용하면 매우 유용합니다. Custom Hooks는 이름에서 알 수 있듯이 사용자가 직접 만드는 훅으로, 리액트의 기본 훅(useState, useEffect 등)을 조합하여 새로운 기능을 정의할 수 있습니다. 이를 통해 코드의 재사용성을 높이고 가독성을 향상시킬 수 있습니다.

Custom Hooks의 기본 구조

Custom Hooks는 일반 함수와 매우 유사하지만, 반드시 'use'로 시작해야 합니다. 이는 리액트가 이 함수가 훅임을 인식할 수 있도록 돕습니다.

import { useState, useEffect } from 'react';

function useCustomHook() {
  const [value, setValue] = useState(0);

  useEffect(() => {
    // 컴포넌트가 마운트될 때 실행될 로직
    const interval = setInterval(() => {
      setValue((prevValue) => prevValue + 1);
    }, 1000);

    // 컴포넌트가 언마운트될 때 실행될 로직
    return () => clearInterval(interval);
  }, []);

  return value;
}

위 예제는 초당 1씩 증가하는 숫자를 반환하는 Custom Hook입니다. 이제 이 훅을 컴포넌트에서 사용할 수 있습니다.

Custom Hooks 사용 예시

Custom Hooks를 사용하는 방법은 매우 간단합니다. 마치 리액트의 기본 훅을 사용하는 것처럼 사용하면 됩니다.

import React from 'react';
import useCustomHook from './useCustomHook';

function Counter() {
  const value = useCustomHook();

  return (
    <div>
      <h1>{value}</h1>
    </div>
  );
}

export default Counter;

위 코드에서 useCustomHook을 호출하여 반환된 value를 사용해 숫자를 화면에 표시합니다.

Custom Hooks로 상태 로직 추출

Custom Hooks의 강력한 점은 상태 관리 로직을 추출해 낼 수 있다는 것입니다. 이를 통해 여러 컴포넌트에서 동일한 상태 관리 로직을 공유할 수 있습니다.

예제: 폼 입력 상태 관리

폼 입력을 관리하는 Custom Hook을 만들어 보겠습니다.

import { useState } from 'react';

function useFormInput(initialValue) {
  const [value, setValue] = useState(initialValue);

  function handleChange(e) {
    setValue(e.target.value);
  }

  return {
    value,
    onChange: handleChange,
  };
}

이제 이 훅을 사용하여 폼 입력을 관리할 수 있습니다.

import React from 'react';
import useFormInput from './useFormInput';

function MyForm() {
  const name = useFormInput('');
  const email = useFormInput('');

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(`Name: ${name.value}, Email: ${email.value}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>Name: </label>
        <input type="text" {...name} />
      </div>
      <div>
        <label>Email: </label>
        <input type="email" {...email} />
      </div>
      <button type="submit">Submit</button>
    </form>
  );
}

export default MyForm;

여기서 useFormInput 훅은 value와 onChange를 반환하고, 이를 각각의 input 요소에 스프레드 연산자로 전달하여 쉽게 사용할 수 있습니다.

더 알아보기

리액트 공식 문서: Custom Hooks를 포함한 리액트 훅의 더 자세한 사용 방법과 예제는 리액트 공식 문서를 참고하세요.
상태 관리: Custom Hooks를 사용한 고급 상태 관리 기법.
훅의 규칙: Custom Hooks 작성 시 따라야 할 규칙과 주의 사항.

내용 요약

Custom Hooks는 리액트에서 반복되는 로직을 추출하고 재사용하기 위해 사용하는 강력한 도구입니다. Custom Hooks를 통해 코드의 재사용성을 높이고 가독성을 향상시킬 수 있습니다. Custom Hooks는 일반 함수와 비슷하지만, 리액트의 기본 훅을 조합하여 새로운 기능을 정의할 수 있으며, 상태 관리 로직을 추출하여 여러 컴포넌트에서 공유할 수 있습니다.

Custom Hooks란 무엇인가?​

Custom Hooks의 기본 구조​

Custom Hooks 사용 예시​

Custom Hooks로 상태 로직 추출​

예제: 폼 입력 상태 관리​

더 알아보기​

내용 요약​